<% include ../head %>

<!--suppress HtmlFormInputWithoutLabel -->
<div class="mainpage course_box" id="online_course">
    
    <h1>Online Training: Getting Started with Neo4j</h1>
    <div class="clear"></div>
    <p class="introText">
        <!--You're beginning with Neo4j? Invest 4 hours of interactive, engaging learning to get familiar with Neo4j.-->
        <!--With this online course you can make progress at your own leisure and pause and resume at any time.-->
    </p>
        <div class="featured course">
            <div class="slide article">
        <h4>Login</h4>
        <blockquote>
            <form class="course_form" id="course_login" method="post">
                <p>I am already registered as <input size="35" name="email" type="email" required="required" placeholder="email address">
            and want <button name="login" class="btn-action">to continue</button> the course.</p>
            <div class="endquote"></div>
            </form>
        </blockquote>
        <h4>Sign-Up</h4>
        <blockquote>
            <form class="course_form" id="course_signup" method="post">
                <p>I, <input name="firstname" required="required" type="text" placeholder="first name" size="20"> <input name="name" required="required" type="text" placeholder="last name" size="20">
                    want to sign up for the Neo4j online course with my <input name="email" type="email" required="required" placeholder="email address" size="35">.</p>
                <p>I work at <input required="required" name="company" type="text" placeholder="company" size="10"> in
                    <select required="required" name="country" style="width:150px"><option value="">Country</option>
                        <optgroup label="North America">
                            <option value="US">United States</option>
                            <option value="CA">Canada</option>
                            <option value="MX">Mexico</option>
                            <option value="_NA">a better place</option>
                        </optgroup>
                        <optgroup label="EMEA">
                            <option value="DE">Germany</option>
                            <option value="UK">United Kingdom</option>
                            <option value="FR">France</option>
                            <option value="CH">Switzerland</option>
                            <option value="AT">Austria</option>
                            <option value="IE">Ireland</option>
                            <option value="SE">Sweden</option>
                            <option value="NO">Norway</option>
                            <option value="DK">Denmark</option>
                            <option value="BE">Belgium</option>
                            <option value="NL">Netherlands</option>
                            <option value="ES">Spain</option>
                            <option value="PT">Portugal</option>
                            <option value="IT">Italy</option>
                            <option value="GR">Greece</option>
                            <option value="IL">Israel</option>
                            <option value="RU">Russia</option>
                            <option value="CZ">Czech Republic</option>
                            <option value="PL">Poland</option>
                            <option value="TR">Turkey</option>
                            <option value="_EMEA">a better place</option>
                        </optgroup>
                        <optgroup label="South America">
                            <option value="US">Brazil</option>
                            <option value="CA">Argentina</option>
                            <option value="_SA">a better place</option>
                        </optgroup>
                        <optgroup label="APAC">
                            <option value="AU">Australia</option>
                            <option value="IN">India</option>
                            <option value="CN">China</option>
                            <option value="JP">Japan</option>
                            <option value="ID">Indonesia</option>
                            <option value="NZ">New Zealand</option>
                            <option value="HK">Hong Kong</option>
                            <option value="KR">Korean Republic</option>
                            <option value="TH">Thailand</option>
                            <option value="PH">Philippines</option>
                            <option value="SG">Singapore</option>
                            <option value="_APAC">a better place</option>
                        </optgroup>
                        <optgroup label="Africa">
                            <option value="ZA">South Africa</option>
                            <option value="KE">Kenya</option>
                            <option value="AE">United Arab Emirates</option>
                            <option value="_AFRICA">a better place</option>
                        </optgroup>
                    </select>
                    <select name="state" size="1" style="display: none;width: 180px;"><option value="">Select State</option><option value="AK">Alaska</option><option value="AL">Alabama</option><option value="AR">Arkansas</option><option value="AZ">Arizona</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DC">District of Columbia</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="IA">Iowa</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="MA">Massachusetts</option><option value="MD">Maryland</option><option value="ME">Maine</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MO">Missouri</option><option value="MS">Mississippi</option><option value="MT">Montana</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="NE">Nebraska</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NV">Nevada</option><option value="NY">New York</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="PR">Puerto Rico</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VA">Virginia</option><option value="VT">Vermont</option><option value="WA">Washington</option><option value="WI">Wisconsin</option><option value="WV">West Virginia</option><option value="WY">Wyoming</option></select>
                    in a place with this
                    <input required="required" type="text" placeholder="ZIP-Code" name="zip" size="10">.</p>
                <p>I want to <select required="required" name="usage"><option value="evaluate">evaluate</option><option value="learn">learn about</option><option value="develop">develop a project with</option><option value="production">go into production with</option><option value="play">just play around with</option></select> Neo4j
                    and <input type="checkbox" name="newsletter" checked="checked"> am also interested to sign up for the monthly newsletter in
                    <select name="newsletter_lang"><option selected="selected" value="English">English</option><option value="German">German</option></select>.</p>
                <button name="register" class="btn-action">Let's go for it.</button>
                <div class="endquote"></div>
            </form>
        </blockquote>
        </div>
        </div>
        <div class="featured mainElement course" b>
            <div class="slide article">
        <h2>Course Description: Getting Started with Neo4j</h2>

        <p class="introText">You're beginning with Neo4j? Invest 4 hours of interactive, engaging learning to get familiar with Neo4j.
            With this online course you can control your progress at your own leisure and pause and resume at any time.
        </p>

        <h3>Audience </h3>
        <ul><li>Developers, System Administrators, DevOps engineers, DBAs, Business Analysts, CTOs, CIOs, and students.</li>
            <li>Also, we invite anyone who is interested in getting an overview of graph databases and Neo4j.</li></ul>

        <h3>Skills taught</h3>
        <ul><li>An understanding of graph databases</li>
            <li>How to use graph databases</li>
            <li>Introduction to data modeling with Graph databases</li>
            <li>How to get started working with Neo4j</li>
        </ul>

        <h3>Prerequisites</h3>
        <p>You don’t need any previous experience with Neo4j, NoSQL databases or specific development languages</p>

        <h3>Course Description</h3>
        <p>This online course helps you build a good starting knowledge of graph databases.
            It also teaches the core functionality of the Neo4j graph database.
            You will learn practically how to read and write Cypher queries to work with Neo4j.
        </p>

        <h3>Course Outline</h3>
        <ul><li>Introduction to Graphs </li>
            <li>Introduction to Graph based Modeling</li>
            <li>Neo4j and Cypher</li>
            <li>Advanced Queries with Cypher</li>
            <li>Real-world implementation use cases with Neo4j</li>
        </ul>

        <h3>Technical requirements:</h3>
        <h4>Supported browsers</h4>
        <ul>
            <li>Chrome</li>
            <li>Firefox</li>
            <li>Safari</li>
            <li>Opera</li>
            <li>Internet Explorer 9,10</li>
        </ul>
    </div>
        </div>
    </div>

    <div id='online_course_player'>
        <div class="course-modal">
            <span class="close-modal">X</span>
            <h2>Welcome to the Neo4j Course</h2>
            <p>Welcome to the Neo4j online course. You can always pause the course and continue by just using your email address.<br/>
            The course is loading now and you can continue as soon as it finishes.</p>
        </div>
    </div>
    <br/>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".course_form select[name=country]").change(function() {
            var show_states = $(this).val() == "US";
            var states = $(".course_form select[name=state]");
            if (show_states) {
                states.show();
                states.attr("required","required");
            } else {
                states.hide();
                states.attr("required",null);
            }
        });
        $(".course_form").submit(function() {
            function showCourse(sessionId, email) {
                $(".course_box").hide();
                var player = $("#online_course_player");

                player.show();
                player.height($(window).height() - 125);

                $('.push').hide();

                /* course modal stuff */
                $('.course-modal').show();

                var topPos = ($(window).height() - $('.course-modal').outerHeight())/2;

                $('.course-modal').css({
                    left: ($(window).width() - $('.course-modal').outerWidth())/2
                });

                $(window).resize(function(){
                    $('.course-modal').css({
                        left: ($(window).width() - $('.course-modal').outerWidth())
                    });
                    $('.course-modal').css({
                        left: ($(window).width() - $('.course-modal').outerWidth())/2
                    });

                    player.height($(window).height() - 125);
                });

                $('.close-modal').on('click', function(e) {
                    $('.course-modal').fadeOut();
                });

                $('#footer').hide();
                var origin = apiUrl.split('/').slice(0, -1).join('/');
                var script = $("<script>").attr("type","text/javascript").attr("src",origin + "/player2/scripts/versal.js")
                        .attr('data-sid',sessionId).attr('data-course',online_course).attr('data-api',apiUrl).attr('data-whitelabel', "true");

                player[0].appendChild(script[0]); // jquery puts script at top of the page dom

            }
            var email=$(this).find("input[name=email]").val();
            if (!email) return false;

            var info = {firstname:null,name:null, email:null, company:null, country:null,state:null, zip:null, usage:null, newsletter:null, newsletter_lang:null};
            for (var key in info) {
                if (!info.hasOwnProperty(key)) continue;
                info[key]=$(this).find("input[name="+key+"]").val()||$(this).find("select[name="+key+"]").val();
            }
            var action=$(this).find("button").attr("name");
            console.log(info);
            $.ajax("/api/versal",{
                data: JSON.stringify({action:action, course:online_course, email:email, info:info}),
                contentType: "application/json",
                accepts: "text",
                type: "post",
                error : function(error) {
                    console.log("Error logging in "+email+" for course",error);
                    _kmq.push(['identify', email ]);
                    info["data"]=error;
                    _kmq.push(['record', 'neo4j-course-'+action+'-error', info]);
                },
                success: function(sessionId) {
                    showCourse(sessionId, email);
                    _kmq.push(['identify', email ]);
                    info["data"]=sessionId;
                    _kmq.push(['record', 'neo4j-course-'+action, info]);
                    ga('send','event','neo4j-course-'+action,JSON.stringify([email,name,info["company"],info["country"],info["state"]])); // ,online_course,sessionId
                    var marketoInfo = {Email: email, Activity:action};
                    if (action=="register") {
                        marketoInfo = {FirstName:info.firstname, LastName:info.name, Email: email, Company: info.company, Country:info.country,State:info.state,
                                              HowdoyouuseNeo4j:info.usage, PostalCode:info.zip, Activity:action};
                        if (info.newsletter) {
                            var nlLangKey = (info.newsletter_lang == "German" ? "Subscription-DACHNewsletterinGerman" : "Monthlynewsletter");
                            marketoInfo[ nlLangKey ]=true;
                        }
                    }

                    $.ajax("/api/marketo", {type:"POST",contentType:"application/json",data:JSON.stringify(marketoInfo),
                        success:function(data,status) {
                            console.log("marketo update",data,status)
                        }});
                    }
            });
            return false;
        });

        var redirectUrl = '/learn/intro_course_finish';
        window.addEventListener('message', function(e) {
            var data;
//            console.log(e.data,e);
            if (e.origin === window.location.origin) {
                try {
                    data = JSON.parse(e.data);
                    if (data.event=='courseEnd') {
                            var marketoInfo = {Email: data.email, Activity:"finish"};
                            $.ajax("/api/marketo",
                                    {type:"POST",contentType:"application/json",data:JSON.stringify(marketoInfo),
                                     success:function(data,status) {
                                        console.log("marketo update finish ",marketoInfo,data,status);
                                     },
                                     error:function(data,status) {
                                         console.log("marketo error finish ",marketoInfo,data,status);
                                     }
                            });
                            setTimeout(function() {window.location.href = redirectUrl;}, 300);
                    }
                } catch (e) { console.log(e); }
            }
        });
    })
</script>
<% include ../foot %>
